<template>
  <view class="content">
    <view class="tabs flexr justify-spacebwt">
      <view
        class="tab"
        :class="{ active: index == tabIndex }"
        v-for="(tab, index) in tabs"
        :key="index"
        @click="tabIndex = index"
        >{{ tab }}{{ countWithTypes(index) }}</view
      >
    </view>
    <view class="flex-1 flexc">
      <couponItem
        v-for="(item, index) in couponsWithType"
        :key="index"
        :item="item"
      ></couponItem>
      <view
        v-if="couponsWithType.length == 0"
        class="flexc flex-1 align-center justify-center"
      >
        <image class="empty-img" src="@/static/empty.png"></image>
        <view class="flexr align-center text-color2"> 暂无优惠券~ </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import couponItem from "@/subpages/widgets/couponItem.vue";
import { ref, computed } from "vue";
import { useUserStore } from "@/store/user";
import { onShow, onLoad } from "@dcloudio/uni-app";
const userStore = useUserStore();
const tabs = ["全部", "未使用", "已使用", "已过期"];
const tabIndex = ref(0);
onLoad(() => {
  userStore.getMyCoupon();
});
const notUse = computed(() => {
  return userStore.coupons.filter((item) => !item.isUse);
});
const isUse = computed(() => {
  return userStore.coupons.filter((item) => item.isUse);
});
const isOverdue = computed(() => {
  return userStore.coupons.filter((item) => item.isOverdue);
});
const couponsWithType = computed(() => {
  switch (tabIndex.value) {
    case 0:
      return userStore.coupons;
    case 1:
      return notUse.value;
    case 2:
      return isUse.value;
    case 3:
      return isOverdue.value;
  }
});
function countWithTypes(type) {
  switch (type) {
    case 0:
      return userStore.coupons.length;
    case 1:
      return notUse.value.length;
    case 2:
      return isUse.value.length;
    case 3:
      return isOverdue.value.length;
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 32rpx 32rpx;
  .tabs {
    .tab {
      font-size: 28rpx;
      color: $text-color2;
      height: 95rpx;
      line-height: 95rpx;
      min-height: 95rpx;
      &.active {
        color: $primary-color;
      }
    }
  }
}
</style>
